<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script>
        function f1(){
            // 直接量语法格式:/pattern/attribute,常用语法
            // let regExp = /^\d+$/;
            let regExp = /^[a-z]+$/i;
            let inText = document.getElementById("inText").value;
            if(regExp.test(inText)){
                document.getElementById("s1").innerHTML = "格式正确";
                document.getElementById("s1").style.color = "green";
            } else{
                document.getElementById("s1").innerHTML = "<span style='color:red;'>格式不正确</span>";
            }
        }

        function f2(){
            // DOM对象语法:new RegExp(pattern,attribute)
            let inText = document.getElementById("inText").value;
            // 必须以英文字母开头,长度4-16位,整个字符串中可以包含数字、字母、下划线
            let regExp = new RegExp("^[a-z]\\w{3,15}$","i");
            if(regExp.test(inText)){
                document.getElementById("s1").innerHTML = "格式正确";
                document.getElementById("s1").style.color = "green";
            } else{
                document.getElementById("s1").innerHTML = "<span style='color:red;'>格式不正确</span>";
            }
        }
    </script>
</head>
<body>
<input type="text" id="inText"><span id="s1"></span><br>
<button onclick="f1()">直接量语法</button>
<button onclick="f2()">DOM对象语法</button>

</body>
</html>